<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- <p>msg:{{msg}}</p>
        <p>count:{{count}}</p>
        <p>bool:{{bool}}</p>
        <p>a:{{a}}</p>
        <p>b:{{b}}</p>
        <p>arr:{{arr}}</p>
        <p>obj:{{obj}}</p>
        <p>fn:{{fn}}</p> -->

        <!-- javascript表达式 -> 先解析{{}}中对应名称的值,再执行后续的javascript表达式-->
        <p>{{count}}</p>
        <p>{{count+1}}</p>
        <p>{{count>=100}}</p>
        <p>{{count>=100 ? "非常优秀":"一般"}}</p>

        <!-- 在{{}}使用函数 -->
        <p>{{testA()}}</p>
        <p>{{testB()}}</p>

        <!-- if...else 流程控制相关的代码 不能在{{}}中写 -->
        <!-- <p>{{if(count>=100)}{"非常优秀"}}</p> -->
    </div>
</body>
<script>
    // javascript表达式(由运算符和操作数(变量和常量)组成的式子) 
    // var a = 10;

    // a + 1  //算术表达式
    // a > 1; //关系表达式 条件表达式
    // a >= 1 && a <= 100  // 逻辑表达式
    // a += 10  // 赋值表达式
    // a ++
    // a >= 60 ? "及格" :"不及格"   // 三目运算符()  



</script>
<script>
    // Vue中的模板语法: 

    // 文本插值  {{}}  =>  “Mustache”语法 (双大括号)
    // Mustache 标签将会被替代为对应数据对象上 msg property 的值。无论何时，绑定的数据对象上 msg property 发生了改变，插值处的内容都会更新。  (将{{xxx}}内的内容 替换为data数据上对应属性的值data[xxx])


    // 常见的文本插值用法: 
    // 1. 可以在文本插值中使用data中绑定的数据  => 不同的数据渲染的结果也不一样
    // a. string number boolean function -> 会正常的渲染到页面上(隐式转化为字符串 toString())
    // b. null 和 undefined  => 将不会渲染到页面上("")
    // c. 数组和对象 会先转化为json字符串 在渲染到页面上   

    // 2. 可以在文本插值中使用javascript表达式

    // 3. 可以在文本插值中使用函数 (data/methods)



    var vm = new Vue({
        el: "#app",
        data: {
            msg: "Hello Vue",
            count: 100,
            bool: true,
            a: null,
            b: undefined,
            arr: [1, 2, 3, 4],
            obj: { a: 1, b: 2, c: 3 },
            fn: function () {
                console.log(11111);
            },
            testA:function(){
                console.log("this",this);
                return 1
            }
        },
        methods: {
            testB:function(){
                console.log("this",this);
                return 2;
            }

        },
    })




</script>

</html>